<script setup lang="ts">
import { computed, ref } from 'vue'
import { useAuthStore } from '@/store/auth'
import { useAppStore } from '@/store/app'
import type { LoginParams } from '@/api/auth'
import { getTenantIdByName } from '@/api/auth'
import { getErrorMessage } from '@/utils/errorMessages'
import platformConfig from '@/utils/platform'

// Store
const authStore = useAuthStore()
const appStore = useAppStore()

// 响应式数据
const formRef = ref()
const isLoading = ref(false)
const isWechatLoading = ref(false)
const isSilentLoginAttempted = ref(false)

// 账号绑定相关状态
const showBindDialog = ref(false)
const socialParams = ref<any>(null)
const bindFormData = ref({
  username: '',
  password: '',
})
const isBinding = ref(false) // 标记是否已尝试静默登录

// 租户选择弹框状态
const showTenantDialog = ref(false)
const tenantInputValue = ref('')
const isGettingTenant = ref(false)
const showWechatAuthButton = ref(false)

// 租户配置
const tenantEnable = ref(import.meta.env.VITE_TENANT_ENABLE === 'true')

// 平台信息
const isWechatMiniProgram = computed(() => platformConfig.isWechatMiniProgram())

// 静默登录配置
const enableSilentLogin = computed(() => {
  return import.meta.env.VITE_ENABLE_SILENT_LOGIN === 'true'
})

// 显示状态
const showLoginForm = computed(() => {
  // 微信小程序环境下，只在非微信环境或需要显示表单时显示
  if (isWechatMiniProgram.value) {
    // 微信小程序环境下不显示登录表单，只显示微信登录
    return false
  }
  // 非微信小程序环境（H5等）直接显示完整登录表单
  return true
})

// 显示微信登录按钮
const showWechatLogin = computed(() => {
  return isWechatMiniProgram.value
})

// 是否有缓存的租户名称
const hasCachedTenantName = computed(() => {
  return !!uni.getStorageSync('wechat-login-tenant-name')
})

// 表单数据
const formData = ref<LoginParams>({
  username: '',
  password: '',
  tenantName: '',
})

// 表单验证规则
const rules: any = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 3, message: '用户名长度不能少于3位' },
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码长度不能少于6位' },
  ],
  ...(tenantEnable.value && {
    tenantName: [
      { required: true, message: '请输入租户名称' },
    ],
  }),
}

// 获取租户ID
async function getTenantId() {
  console.log('=== 开始获取租户ID ===')
  console.log('tenantEnable.value:', tenantEnable.value)
  console.log('formData.value.tenantName:', formData.value.tenantName)
  console.log('当前authStore.tenantId:', authStore.tenantId)

  // 如果启用租户功能并且有租户名，获取租户ID
  if (tenantEnable.value && formData.value.tenantName) {
    console.log('使用租户功能获取租户ID')
    try {
      const res = await getTenantIdByName(formData.value.tenantName)
      console.log('getTenantIdByName响应:', res)
      // 处理不同的响应格式
      if (res.code === 0 && res.data) {
        const tenantId = res.data
        console.log('租户ID获取成功，设置租户ID:', tenantId)
        if (tenantId) {
          authStore.setTenantId(tenantId)
          console.log('设置后的authStore.tenantId:', authStore.tenantId)
        }
        else {
          console.error('租户ID为空:', tenantId)
        }
      }
      else {
        console.error('获取租户ID失败，API返回不成功:', res)
      }
    }
    catch (error) {
      console.error('获取租户ID失败:', error)
    }
  }
  else if (formData.value.tenantName) {
    console.log('租户功能禁用，但有默认租户名，尝试获取租户ID')
    // 即使租户功能禁用，但如果有默认租户名，也要获取租户ID
    try {
      const res = await getTenantIdByName(formData.value.tenantName)
      console.log('getTenantIdByName响应 (禁用模式):', res)
      // 处理不同的响应格式
      if (res.code === 0 && res.data) {
        const tenantId = res.data
        console.log('默认租户ID获取成功，设置租户ID:', tenantId)
        if (tenantId) {
          authStore.setTenantId(tenantId)
          console.log('设置后的authStore.tenantId:', authStore.tenantId)
        }
        else {
          console.error('默认租户ID为空:', tenantId)
        }
      }
      else {
        console.error('获取默认租户ID失败，API返回不成功:', res)
      }
    }
    catch (error) {
      console.error('获取默认租户ID失败:', error)
    }
  }
  else {
    console.log('没有租户名，跳过租户ID获取')
  }

  console.log('=== 租户ID获取结束 ===')
  console.log('最终authStore.tenantId:', authStore.tenantId)
}

// 处理登录
async function handleLogin() {
  try {
    // 表单验证
    if (!formRef.value) {
      appStore.showToast('表单未初始化')
      return
    }

    const valid = await formRef.value.validate()
    if (!valid) {
      appStore.showToast('请检查输入信息')
      return
    }

    // 租户验证
    if (tenantEnable.value && !formData.value.tenantName) {
      appStore.showToast('请输入租户名称')
      return
    }

    isLoading.value = true

    // 获取租户ID
    await getTenantId()

    // 准备登录数据，包含租户ID
    const loginData = {
      ...formData.value,
      tenantId: authStore.tenantId,
    }

    console.log('登录请求数据:', loginData)
    console.log('当前租户ID:', authStore.tenantId)

    // 调用登录接口
    await authStore.login(loginData)

    // 登录成功提示
    appStore.showToast('登录成功', 'success')

    // 跳转到首页
    setTimeout(() => {
      handleLoginSuccess()
    }, 1000)
  }
  catch (error: any) {
    console.error('登录失败:', error)

    // 使用友好的错误提示
    let errorMessage = '登录失败，请重试'

    // 如果是业务错误，使用错误码映射
    if (error.message && error.message.includes('code')) {
      try {
        const errorData = JSON.parse(error.message)
        if (errorData.code) {
          errorMessage = getErrorMessage(errorData.code, errorData.msg)
        }
      }
      catch {
        // 解析失败，使用原始错误信息
        errorMessage = error.message
      }
    }
    else {
      errorMessage = error.message || '登录失败，请重试'
    }

    appStore.showToast(errorMessage)
  }
  finally {
    isLoading.value = false
  }
}

// 忘记密码
function handleForgotPassword() {
  appStore.showToast('请联系系统管理员重置密码')
}

// 处理微信一键登录（先弹框选择租户）
function handleWechatOneClickLogin() {
  console.log('🔐 点击微信一键登录')

  // 优先使用缓存的租户名
  const cachedTenantName = uni.getStorageSync('wechat-login-tenant-name')
  tenantInputValue.value = cachedTenantName || ''

  console.log('🏢 使用租户名:', tenantInputValue.value, '(缓存:', !!cachedTenantName, ')')

  // 显示租户选择弹框
  showTenantDialog.value = true
}

// 确认租户并获取手机号
async function handleConfirmTenant() {
  if (!tenantInputValue.value.trim()) {
    appStore.showToast('请输入租户名称')
    return
  }

  try {
    isGettingTenant.value = true

    // 获取租户ID
    console.log('🏢 获取租户ID:', tenantInputValue.value)
    const res = await getTenantIdByName(tenantInputValue.value)

    if (res.code === 0 && res.data) {
      // 设置租户ID
      authStore.setTenantId(res.data)
      console.log('✅ 租户ID设置成功:', res.data)

      // 缓存租户名称，方便下次使用
      uni.setStorageSync('wechat-login-tenant-name', tenantInputValue.value.trim())
      console.log('💾 租户名称已缓存:', tenantInputValue.value.trim())

      // 关闭弹框
      showTenantDialog.value = false

      // 显示微信授权按钮
      showWechatAuthButton.value = true

      // 触发微信授权
      triggerWechatAuth()
    }
    else {
      appStore.showToast('租户不存在，请检查租户名称')
    }
  }
  catch (error: any) {
    console.error('❌ 获取租户ID失败:', error)
    appStore.showToast('获取租户信息失败，请重试')
  }
  finally {
    isGettingTenant.value = false
  }
}

// 触发微信授权（显示授权按钮）
function triggerWechatAuth() {
  console.log('📱 租户确认成功，现在可以进行微信授权')

  // 显示提示信息
  uni.showToast({
    title: '请点击下方按钮进行微信授权',
    icon: 'none',
    duration: 2000,
  })
}

// 处理微信小程序获取手机号授权
function handleGetPhoneNumber(e: any) {
  console.log('📱 获取手机号授权回调:', e)

  // 检查事件对象结构
  const detail = e.detail || e
  console.log('📱 事件详情:', detail)

  if (detail && detail.errMsg === 'getPhoneNumber:ok') {
    // 获取授权成功，隐藏授权按钮
    showWechatAuthButton.value = false

    // 执行登录
    const phoneCode = detail.code
    if (phoneCode) {
      console.log('✅ 获取到手机号授权码:', phoneCode)
      // 执行实际的登录逻辑
      performWeixinMiniAppLogin(phoneCode)
    }
    else {
      console.error('❌ 手机号授权码为空')
      appStore.showToast('获取手机号授权失败')
    }
  }
  else {
    const errMsg = detail?.errMsg || '未知错误'
    console.log('❌ 用户拒绝授权或授权失败:', errMsg)
    appStore.showToast('需要授权手机号才能登录')
  }
}

// 取消租户选择
function handleCancelTenant() {
  showTenantDialog.value = false
  tenantInputValue.value = ''
}

// 清除租户缓存
function handleClearTenantCache() {
  uni.removeStorageSync('wechat-login-tenant-name')
  console.log('🗑️ 租户名称缓存已清除')

  // 重置输入框为空
  tenantInputValue.value = ''

  // 显示提示
  appStore.showToast('已清除记住的租户', 'success')
}

// 取消微信授权
function handleCancelAuth() {
  showWechatAuthButton.value = false
  // 重新显示租户选择弹框
  showTenantDialog.value = true
}

// 执行微信小程序登录
async function performWeixinMiniAppLogin(phoneCode: string) {
  try {
    isWechatLoading.value = true

    // 确保有租户ID（不重新获取，使用已设置的租户ID）
    if (!authStore.tenantId) {
      throw new Error('租户ID未设置，无法进行登录')
    }

    console.log('📱 开始微信小程序一键登录，租户ID:', authStore.tenantId)

    // 获取微信登录凭证
    const loginResult = await new Promise<{ code: string }>((resolve, reject) => {
      uni.login({
        provider: 'weixin',
        success: (res) => {
          if (res.code) {
            resolve({ code: res.code })
          }
          else {
            reject(new Error('获取微信登录凭证失败'))
          }
        },
        fail: (err) => {
          reject(new Error(`微信登录失败: ${err.errMsg || err.message || '未知错误'}`))
        },
      })
    })

    // 调用后端接口进行登录
    const loginParams = {
      phoneCode,
      loginCode: loginResult.code,
      state: 'admin-login',
    }

    console.log('🔐 微信小程序登录参数:', loginParams)

    await authStore.weixinMiniAppLogin(loginParams)

    console.log('✅ 微信小程序登录成功')
    appStore.showToast('登录成功', 'success')

    // 跳转到首页
    handleLoginSuccess()
  }
  catch (error: any) {
    console.error('❌ 微信小程序登录失败:', error)

    let errorMessage = '微信登录失败，请重试'
    if (error.message) {
      errorMessage = error.message
    }

    appStore.showToast(errorMessage)
  }
  finally {
    isWechatLoading.value = false
  }
}

// 微信小程序静默登录
async function handleWechatSilentLogin() {
  // 检查是否在微信小程序环境
  if (!isWechatMiniProgram.value) {
    console.log('⚠️ 非微信小程序环境，无法使用静默登录')
    appStore.showToast('微信登录功能仅在微信小程序中可用')
    return
  }

  try {
    isWechatLoading.value = true

    // 确定租户名
    let tenantName = formData.value.tenantName
    if (!tenantName && tenantEnable.value) {
      // 如果启用租户功能但没有租户名，使用空字符串
      tenantName = ''
    }

    console.log('🔐 微信静默登录，租户名:', tenantName, '租户功能启用:', tenantEnable.value)

    // 调用微信静默登录，传递租户名
    await authStore.wechatSilentLogin(tenantName)

    // 静默登录成功，直接跳转不显示toast
    console.log('✅ 微信静默登录成功')
    uni.switchTab({
      url: '/pages/index/index',
    })
  }
  catch (error: any) {
    // 检查是否是需要绑定账号的错误
    if (error.message === 'NEED_BIND_ACCOUNT' && error.socialParams) {
      console.log('⚠️ 微信账号未绑定，显示绑定对话框')
      socialParams.value = error.socialParams
      showBindDialog.value = true
      return
    }

    // 静默登录失败是正常现象，不显示错误提示
    console.log('ℹ️ 微信静默登录失败，请手动登录:', error.message)

    // 如果是租户相关错误，显示错误提示
    if (error.message && (error.message.includes('租户') || error.message.includes('tenant'))) {
      appStore.showToast(error.message)
    }
  }
  finally {
    isWechatLoading.value = false
    // 标记已尝试静默登录，显示手动登录界面
    isSilentLoginAttempted.value = true
  }
}

// 统一登录成功处理
function handleLoginSuccess() {
  console.log('✅ 登录成功，跳转到首页')
  uni.switchTab({
    url: '/pages/index/index',
  })
}

// 处理账号绑定
async function handleBindAccount() {
  if (!socialParams.value) {
    appStore.showToast('社交登录参数丢失，请重新尝试')
    showBindDialog.value = false
    return
  }

  if (!bindFormData.value.username || !bindFormData.value.password) {
    appStore.showToast('请输入用户名和密码')
    return
  }

  isBinding.value = true

  try {
    const bindParams = {
      ...socialParams.value,
      username: bindFormData.value.username,
      password: bindFormData.value.password,
    }

    console.log('🔗 开始绑定社交账号:', { ...bindParams, password: '***' })

    await authStore.bindSocial(bindParams)

    console.log('✅ 社交账号绑定成功')
    appStore.showToast('绑定成功，登录完成！')

    // 关闭绑定对话框
    showBindDialog.value = false

    // 跳转到首页
    handleLoginSuccess()
  }
  catch (error: any) {
    console.error('❌ 社交账号绑定失败:', error)
    appStore.showToast(error.message || '绑定失败，请检查用户名和密码')
  }
  finally {
    isBinding.value = false
  }
}

// 取消绑定
function handleCancelBind() {
  showBindDialog.value = false
  socialParams.value = null
  bindFormData.value.username = ''
  bindFormData.value.password = ''
}

// 页面加载时的处理
onLoad(async () => {
  // 检查登录状态
  await checkLoginStatus()
})

// 检查登录状态并处理
async function checkLoginStatus() {
  try {
    // 初始化认证状态
    authStore.initAuth()

    // 如果已经登录，直接跳转到首页
    if (authStore.isLoggedIn) {
      console.log('✅ 管理员已登录，跳转到首页')
      uni.switchTab({
        url: '/pages/index/index',
      })
      return
    }

    // 检查Token是否有效
    const isTokenValid = await authStore.checkAndRefreshToken()
    if (isTokenValid) {
      console.log('✅ Token有效，跳转到首页')
      uni.switchTab({
        url: '/pages/index/index',
      })
      return
    }

    // 微信小程序环境下，根据配置决定是否尝试静默登录
    if (isWechatMiniProgram.value) {
      if (enableSilentLogin.value) {
        console.log('📱 微信小程序环境，静默登录已启用，尝试静默登录')

        // 确保有租户名
        if (tenantEnable.value && !formData.value.tenantName) {
          formData.value.tenantName = ''
          console.log('🏢 设置租户名:', formData.value.tenantName)
        }

        // 延迟执行，确保页面加载完成
        setTimeout(() => {
          handleWechatSilentLogin()
        }, 300)
      }
      else {
        console.log('📱 微信小程序环境，静默登录已禁用，直接显示登录表单')
        isSilentLoginAttempted.value = true
      }
    }
    else {
      console.log('🌐 非微信小程序环境，显示登录表单')
    }
  }
  catch (error) {
    console.error('检查登录状态失败:', error)
    // 检查失败时，继续显示登录页面
  }
}
</script>

<template>
  <view class="login-container">
    <!-- 登录表单区域 -->
    <view class="login-content">
      <!-- Logo 区域 -->
      <view class="logo-section">
        <image class="logo" src="/static/images/logo.png" mode="aspectFit" />
        <text class="app-name">
          淘辰蒂培训管理
        </text>
        <text class="app-desc">
          专业的培训班管理系统
        </text>
      </view>

      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 微信小程序环境：只显示微信一键登录 -->
        <view v-if="showWechatLogin" class="wechat-only-login">
          <view class="welcome-text">
            <text class="welcome-title">
              欢迎使用淘辰蒂培训管理
            </text>
            <text class="welcome-desc">
              请使用微信一键登录
            </text>
          </view>

          <wd-button
            type="primary"
            size="large"
            block
            :loading="isWechatLoading"
            class="wechat-one-click-btn"
            @click="handleWechatOneClickLogin"
          >
            <wd-icon name="wechat" size="18px" style="margin-right: 8px;" />
            {{ isWechatLoading ? '登录中...' : '微信一键登录' }}
          </wd-button>
        </view>

        <!-- H5环境：显示完整登录表单 -->
        <view v-if="showLoginForm" class="password-login-form">
          <wd-form ref="formRef" :model="formData" :rules="rules">
            <wd-cell-group>
              <!-- 租户输入 -->
              <wd-input
                v-if="tenantEnable"
                v-model="formData.tenantName"
                prop="tenantName"
                label="租户"
                placeholder="请输入租户名称"
                clearable
                prefix-icon="house"
              />
              <wd-input
                v-model="formData.username"
                prop="username"
                label="用户名"
                placeholder="请输入用户名"
                clearable
                prefix-icon="user"
              />
              <wd-input
                v-model="formData.password"
                prop="password"
                label="密码"
                placeholder="请输入密码"
                clearable
                prefix-icon="lock"
                show-password
              />
            </wd-cell-group>
          </wd-form>

          <!-- 登录按钮 -->
          <wd-button
            type="primary"
            size="large"
            block
            :loading="isLoading"
            class="login-btn"
            @click="handleLogin"
          >
            {{ isLoading ? '登录中...' : '登录' }}
          </wd-button>
        </view>

        <!-- 其他操作（非微信小程序环境显示） -->
        <view v-if="!isWechatMiniProgram || showLoginForm" class="other-actions">
          <text class="forgot-password" @click="handleForgotPassword">
            忘记密码？
          </text>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">
        ©2024 淘辰蒂培训 版权所有
      </text>
    </view>

    <!-- 账号绑定对话框 -->
    <wd-popup
      v-model="showBindDialog"
      position="center"
      round
      :close-on-click-modal="false"
      custom-style="width: 320px; padding: 24px; border-radius: 12px;"
    >
      <view class="bind-dialog">
        <view class="bind-title">
          <wd-icon name="link" size="20px" color="#1890ff" />
          <text class="title-text">
            绑定账号
          </text>
        </view>

        <view class="bind-desc">
          <text>检测到您的微信账号尚未绑定管理员账号，请输入您的账号密码进行绑定</text>
        </view>

        <view class="bind-form">
          <wd-input
            v-model="bindFormData.username"
            label="用户名"
            placeholder="请输入用户名"
            clearable
            prefix-icon="user"
            style="margin-bottom: 16px;"
          />
          <wd-input
            v-model="bindFormData.password"
            label="密码"
            placeholder="请输入密码"
            clearable
            prefix-icon="lock"
            show-password
          />
        </view>

        <view class="bind-actions">
          <wd-button
            type="default"
            size="large"
            :disabled="isBinding"
            @click="handleCancelBind"
          >
            取消
          </wd-button>
          <wd-button
            type="primary"
            size="large"
            :loading="isBinding"
            @click="handleBindAccount"
          >
            {{ isBinding ? '绑定中...' : '确认绑定' }}
          </wd-button>
        </view>
      </view>
    </wd-popup>

    <!-- 租户选择弹框 -->
    <wd-popup
      v-model="showTenantDialog"
      position="center"
      round
      :close-on-click-modal="false"
      custom-style="width: 320px; padding: 24px; border-radius: 12px;"
    >
      <view class="tenant-dialog">
        <view class="tenant-title">
          <wd-icon name="house" size="20px" color="#1890ff" />
          <text class="title-text">
            选择租户
          </text>
        </view>

        <view class="tenant-desc">
          <text>请输入您的租户名称以继续登录</text>
          <text class="tenant-cache-tip">
            租户名称将被记住，下次无需重复输入
          </text>
        </view>

        <view class="tenant-form">
          <wd-input
            v-model="tenantInputValue"
            label="租户名称"
            placeholder="请输入租户名称"
            clearable
            prefix-icon="house"
            style="margin-bottom: 16px;"
          />
        </view>

        <view class="tenant-actions">
          <wd-button
            type="default"
            size="large"
            :disabled="isGettingTenant"
            @click="handleCancelTenant"
          >
            取消
          </wd-button>
          <wd-button
            type="primary"
            size="large"
            :loading="isGettingTenant"
            @click="handleConfirmTenant"
          >
            {{ isGettingTenant ? '获取中...' : '确定' }}
          </wd-button>
        </view>

        <!-- 清除缓存选项 -->
        <view v-if="hasCachedTenantName" class="tenant-cache-actions">
          <text class="clear-cache-btn" @click="handleClearTenantCache">
            清除记住的租户
          </text>
        </view>
      </view>
    </wd-popup>

    <!-- 微信授权按钮（租户确认后显示） -->
    <view v-if="showWechatAuthButton" class="wechat-auth-overlay">
      <view class="auth-content">
        <view class="auth-title">
          <wd-icon name="wechat" size="24px" color="#07c160" />
          <text class="title-text">
            微信授权登录
          </text>
        </view>

        <view class="auth-desc">
          <text>租户信息确认成功，请点击下方按钮获取微信手机号进行登录</text>
        </view>

        <wd-button
          type="success"
          size="large"
          block
          open-type="getPhoneNumber"
          class="auth-button"
          @getphonenumber="handleGetPhoneNumber"
        >
          <wd-icon name="wechat" size="18px" style="margin-right: 8px;" />
          获取微信手机号
        </wd-button>

        <wd-button
          type="default"
          size="large"
          block
          class="cancel-button"
          @click="handleCancelAuth"
        >
          取消
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
}

.logo-section {
  text-align: center;
  margin-bottom: 60px;

  .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }

  .app-name {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
  }

  .app-desc {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-section {
  .login-btn {
    margin-top: 32px;
    margin-bottom: 24px;
    border-radius: 24px;
  }

  .silent-login-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .loading-text {
      margin-top: 16px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .wechat-login-section {
    margin-top: 24px;

    .divider {
      position: relative;
      text-align: center;
      margin: 24px 0;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
      }

      .divider-text {
        position: relative;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 0 16px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .wechat-login-btn {
      border-radius: 24px;
    }
  }
}

.other-actions {
  display: flex;
  justify-content: center;
  align-items: center;

  .forgot-password {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
  }
}

.footer {
  padding: 20px;
  text-align: center;

  .footer-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }
}

// 重写 Wot Design 组件样式
:deep(.wd-cell-group) {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.wd-cell) {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  &:last-child {
    border-bottom: none;
  }
}

:deep(.wd-input__label) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

:deep(.wd-input__inner) {
  color: #ffffff;

  &::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}

:deep(.wd-input__icon) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.wd-loading) {
  --wd-loading-color: rgba(255, 255, 255, 0.9);
}

// 账号绑定对话框样式
.bind-dialog {
  .bind-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;

    .title-text {
      margin-left: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #1890ff;
    }
  }

  .bind-desc {
    margin-bottom: 24px;
    text-align: center;

    text {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }

  .bind-form {
    margin-bottom: 24px;
  }

  .bind-actions {
    display: flex;
    gap: 12px;

    :deep(.wd-button) {
      flex: 1;
    }
  }
}

// 微信小程序专用登录样式
.wechat-only-login {
  text-align: center;
  padding: 40px 0;

  .welcome-text {
    margin-bottom: 40px;

    .welcome-title {
      display: block;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 8px;
    }

    .welcome-desc {
      display: block;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .wechat-one-click-btn {
    background: linear-gradient(135deg, #07c160 0%, #00d976 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
    border-radius: 24px;

    &:active {
      transform: translateY(1px);
    }
  }
}

// 租户选择弹框样式
.tenant-dialog {
  .tenant-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;

    .title-text {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  .tenant-desc {
    margin-bottom: 20px;
    text-align: center;

    text {
      display: block;
      font-size: 14px;
      color: #666;
      line-height: 1.4;
    }

    .tenant-cache-tip {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
    }
  }

  .tenant-form {
    margin-bottom: 24px;
  }

  .tenant-actions {
    display: flex;
    gap: 12px;

    :deep(.wd-button) {
      flex: 1;
    }
  }

  .tenant-cache-actions {
    margin-top: 16px;
    text-align: center;

    .clear-cache-btn {
      font-size: 12px;
      color: #999;
      text-decoration: underline;
      cursor: pointer;

      &:active {
        color: #666;
      }
    }
  }
}

// 微信授权覆盖层样式
.wechat-auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .auth-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin: 20px;
    max-width: 320px;
    width: 100%;

    .auth-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;

      .title-text {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }

    .auth-desc {
      text-align: center;
      margin-bottom: 24px;

      text {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }

    .auth-button {
      margin-bottom: 12px;
      background: linear-gradient(135deg, #07c160 0%, #00d976 100%);
      border: none;
      border-radius: 24px;
    }

    .cancel-button {
      border-radius: 24px;
    }
  }
}
</style>

<route lang="json">
{
  "name": "login",
  "type": "home",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "管理员登录"
  }
}
</route>
